
<template>
<div class="fullMain">
  <x-header :left-options="{backText: '',showBack: false}">
    {{this.$route.params.tag}}
  </x-header>
  <div style="height:20px"/>
  <!--插入验证提示框-->
  <div v-transfer-dom>
        <alert v-model="isShowAlert" > {{alertText}}</alert>
      </div>
  <div class='time-line' v-if="isShow">
    <div v-for='(item,index) in testList' :key="index" class='time-line-div'>
      <p>{{item.date}}<br>{{start(item.startTime)}}-{{end(item.endTime)}}</p>
      <p ref='circular' :style="{background:(index<newCount?'red':'green')}"></p>
      <p>汇报人：{{item.userName}}<br>内容：{{item.content}}</p>
    </div>
    <div class='img-dotted' ref='dotted' ></div>
  </div>
</div>
</template>


<script>
  import { XHeader } from 'vux'
  import {mapState} from 'Vuex'
  import group from 'api/group'
  import report from 'api/report'
  export default {
    data(){
      return{
        alertText: "", // 验证提示框的文本
        isShowAlert: false, // 是否显示验证提示,
        testList:[],
        newCount:0, //更新条数
        isShow:false,
      }
    },
    mounted(){
      this.getData()
      this.newCount = this.$route.params.count
     // this.$refs.dotted.style.left = this.$refs.circular[0].offsetLeft - 12 + 'px'
    },
    computed:{
      ...mapState({
        userInfo: state => state.user.userInfo
      })
    },
    components:{
      XHeader,
       
    },
    methods:{
      back(){
        this.$router.go(-1);
      },
      start(date){
        return date.substring(0,5)
      },
      end(date){
        return date.substring(0,5)
      },
      showAlert(alertText){
        this.isShowAlert = true
        this.alertText = alertText
      },
      closeTip(){
        this.isShowAlert = false
        this.alertText = ''
      },
      async getData(){
        let tagid= this.$route.params.tagid//11893839792081
        const result = await report.getBacklogTimeline(this.userInfo.labName,tagid,this.userInfo.userId)
            if(result.code===0){
                //如果失败了显示提示
                this.showAlert("出错了")
            }else{
              this.testList = result.data
              if(this.testList.length===0){ 
                this.showAlert("此待办没有进展")
                this.isShow = false
              }else{this.isShow = true}
            }
      }
    }
  }
</script>

<style scoped>
.time h2{
	color:#FF6600;
	margin: 20px auto 30px auto;
}
.time-line{
	position: relative;
	width:300px;
  top:50px;
	margin:0 auto;
}
.time-line-div{
	position:relative;
	min-height:85px;
}
.time-line-div>p:nth-child(1){
	position: absolute;
	left:0;
	width:100px;
}
.time-line-div>p:nth-child(2){
	position:absolute;
	left: 100px;
	width:15px;
	height:15px;
	top:10px;
/*	background:#5CB85C; 这里更改中间圆点的颜色*/
	border-radius: 50%;
	z-index: 10
}
.time-line-div>p:nth-child(3){
	position:absolute;
	left: 130px;
	padding: 10px;
	background: #1abc9c;
	font-size:.8rem;
	color:#fff;
	border-radius: 10px;
  word-break:break-word;
  
}
.img-dotted{
	position:absolute;
	width:20px;
	height:100%;
	top:0;
	z-index: 1;
  left:88px;
	background:url('~static/img/dotted.png');
}
.time-line-detail>p{
	margin-left: 30px;
	margin-bottom: 10px;
}
</style>